<template>
	<view>
		<scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="scrollLeft">
			<view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']"
			 :data-current="index" @tap.stop="swichNav">
				<text class="tab-bar-title">{{item}}</text>
			</view>
		</scroll-view>
		<view class="main" v-if="currentTab == 0">
			<view v-for="(item, index) in getList" :key="index" v-if="statusa == false">
				<view class="content" @tap="details" :data-gid="index">
					<image :src="item.thumb_img"></image>
					<view class="name-money">
						<view class="name">{{item.goods_name}}</view>
						<view class="money">￥{{item.price}}</view>
					</view>
				</view>
			</view>
			<view v-if="statusa" class="available">
				<image src="/static/remao_shop/img/noData.png"></image>
				<view>暂无数据</view>
			</view>
		</view>
		<view class="main" v-if="currentTab == 1">
			<view v-for="(item, index) in dpList" :key="index" v-if="statusb == false">
				<view class="content" @tap="dpdetails" :data-gid="index">
					<image :src="item.store_logo[0]"></image>
					<view class="name-money">
						<view class="name">{{item.store_name}}</view>
					</view>
				</view>
			</view>
			<view v-if="statusb" class="available">
				<image src="/static/remao_shop/img/noData.png"></image>
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import api from "../../../api";

	export default {
		data() {
			return {
				active: 0,
				getList: [],
				dpList: [],
				user_id: '',
				pageint: 1,
				statusa: false,
				statusb: false,
				currentTab: 0,
				tabbar: ['商品', '店铺']
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function() {
			wx.getStorage({
				key: 'userId',
				success: res => {
					console.log(res);
					this.setData({
						user_id: res.data
					});
					this.getListFun();
					this.dpuList();
				}
			});
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			wx.getStorage({
				key: 'userId',
				success: res => {
					console.log(res);
					this.setData({
						user_id: res.data
					});
					this.getListFun();
					this.dpuList();
				}
			});
			this.dpuList();
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.getListFun();
			this.dpuList();
			wx.stopPullDownRefresh();
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			getListFun: function() {
				app.globalData.request({
					url: api.default.goods_collection_list,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						user_id: this.user_id,
						pageint: this.pageint
					},
					method: 'POST',
					success: res => {
						wx.hideLoading();
						console.log(res);
						this.setData({
							getList: res
						});

						if (this.getList.length == 0) {
							this.setData({
								statusa: true
							});
						}
					}
				});
			},
			//店铺数据
			dpuList: function() {
				app.globalData.request({
					url: api.default.goods_getShopList,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						uid: this.user_id
					},
					method: 'POST',
					success: res => {
						wx.hideLoading();
						console.log(res);
						this.setData({
							dpList: res.shop_list
						});

						if (this.dpList.length == 0) {
							this.setData({
								statusb: true
							});
						}
					}
				});
			},

			swichNav: function(e) {
				let cur = e.currentTarget.dataset.current;
				if (this.currentTab == cur) {
					return false;
				} else {
					this.currentTab = cur
				}
				this.setData({
					statusa: false,
					statusb: false
				});
				this.getListFun();
				this.dpuList();
				wx.showLoading({
					title: '加载中'
				});
			},

			//切换标签时触发
			onChange(event) {
				this.setData({
					statusa: false,
					statusb: false
				});
				this.getListFun();
				this.dpuList();
				wx.showLoading({
					title: '加载中'
				}); // wx.showToast({
				//    title: `切换到标签 ${event.detail.index + 1}`,
				//    icon: 'none'
				// });
			},

			details: function(event) {
				console.log(event.currentTarget.dataset.gid);
				var index = event.currentTarget.dataset.gid;
				console.log(this.getList[index].goods_id);
				wx.navigateTo({
					url: '../../packageA/rushdetails/rushdetails?goods_id=' + this.getList[index].goods_id + '&img=' + this.getList[
						index].thumb_img
				});
			},
			dpdetails: function(event) {
				console.log(event.currentTarget.dataset.gid);
				var index = event.currentTarget.dataset.gid;
				wx.navigateTo({
					url: '../../packageA/goodShop/goodShop?id=' + this.dpList[index].id + '&name=' + this.dpList[index].store_name +
						'&logo=' + this.dpList[index].store_logo[0]
				});
			}
		}
	};
</script>
<style>
	@import "./collect.css";
	::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
		}
	
		.tab-view::before {
			content: '';
			position: absolute;
			border-bottom: 1upx solid #eaeef1;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			bottom: 0;
			right: 0;
			left: 0;
		}
	
		.tab-view {
			width: 100%;
			height: 100upx;
			overflow: hidden;
			box-sizing: border-box;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background: #fff;
			white-space: nowrap;
		}
	
		.tab-bar-item {
			padding: 0 10upx;
			width: 330upx;
			height: 100upx;
			min-width: 80upx;
			line-height: 100upx;
			margin: 0 20upx;
			display: inline-block;
			text-align: center;
			box-sizing: border-box;
		}
	
		.tab-bar-title {
			height: 100upx;
			line-height: 100upx;
			font-size: 28upx;
			color: #999;
			font-weight: 400;
		}
	
		.active {
			border-bottom: 6upx solid #e51f54;
		}
	
		.active .tab-bar-title {
			color: #333 !important;
			font-size: 28upx;
			font-weight: 500;
		}
	
		.main {
			margin-top: 100upx;
		}
</style>
